import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { List, Button, Input, Form, Modal, message } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './UserList.less';

const FormItem = Form.Item;

const CreateFormAdd = Form.create()((props) => {
  const { modalVisible, form, handleAdd, handleModalVisibleAdd } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleAdd(fieldsValue);
    });
  };
  return (
    <Modal
      title="新建用户"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisibleAdd()}
    >
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="姓名"
      >
        {form.getFieldDecorator('name', {
          rules: [{ required: true, message: 'Please input a name...' }],
        })(
          <Input placeholder="请输入" />
        )}
      </FormItem>
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="邮箱"
      >
        {form.getFieldDecorator('email', {
          rules: [{ required: true, message: 'Please input a email...' }],
        })(
          <Input placeholder="请输入" />
        )}
      </FormItem>
    </Modal>
  );
});

const CreateFormUpdate = Form.create()((props) => {
  const { modalVisible, form, handleUpdate, handleModalVisibleUpdate, tempUser } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleUpdate(fieldsValue);
    });
  };
  const tempUserEmail = (tempUser == null) ? '' : tempUser.email;
  console.log(tempUser);
  return (
    <Modal
      title="编辑用户"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisibleUpdate()}
    >
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="姓名"
      >
        {form.getFieldDecorator('name', {
          rules: [{ required: true, message: 'Please input a name...' }],
        })(
          <Input placeholder="44" />
        )}
      </FormItem>
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="邮箱"
      >
        <p>{tempUserEmail}</p>
      </FormItem>
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="邮箱"
      >
        {form.getFieldDecorator('email', {
          rules: [{ required: true, message: 'Please input a email...' }],
        })(
          <Input />
        )}
      </FormItem>
    </Modal>
  );
});

@connect(({ userList, loading }) => ({
  userList,
  loading: loading.models.userList,
}))
@Form.create()
export default class UserList extends PureComponent {
  state = {
    tempUser: null,
    modalVisibleAdd: false,
    modalVisibleUpdate: false,
  }
  componentDidMount() {
    this.props.dispatch({
      // 名称
      type: 'userList/fetch',
      payload: {
        count: 5,
      },
    });
  }

  handleModalVisibleAdd = (flag) => {
    this.setState({
      modalVisibleAdd: !!flag,
    });
  }

  handleModalVisibleUpdate = (flag, object) => {
    this.setState({
      tempUser: object,
      modalVisibleUpdate: !!flag,
    });
  }

  handleAdd = (fields) => {
    this.props.dispatch({
      type: 'userList/addFetch',
      payload: {
        name: fields.name,
        email: fields.email,
      },
    });

    message.success('添加成功');
    this.setState({
      modalVisibleAdd: false,
    });
  }

  handleUpdate = (fields) => {
    this.props.dispatch({
      type: 'userList/updateFetch',
      payload: {
        id: fields.id,
        name: fields.name,
        email: fields.email,
      },
    });

    message.success('添加成功');
    this.setState({
      modalVisibleUpdate: false,
    });
  }

  deleteUser = (values) => {
    this.props.dispatch({
      type: 'userList/deleteFetch',
      payload: {
        id: values,
      },
    });
  }

  render() {
    const { modalVisibleAdd, modalVisibleUpdate } = this.state;
    const { userList: { userList }, loading } = this.props;
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      pageSize: 5,
      total: 50,
    };

    const parentMethodsAdd = {
      handleAdd: this.handleAdd,
      handleModalVisibleAdd: this.handleModalVisibleAdd,
    };

    const parentMethodsUpdate = {
      handleUpdate: this.handleUpdate,
      handleModalVisibleUpdate: this.handleModalVisibleUpdate,
      tempUser: this.state.tempUser,
    };

    return (
      <PageHeaderLayout>
        <div className={styles.standardList}>
          <Button
            type="dashed"
            style={{ width: '100%', marginBottom: 8 }}
            icon="plus"
            onClick={() => this.handleModalVisibleAdd(true)}
          >
            添加
          </Button>
          <List
            size="large"
            rowKey="id"
            loading={loading}
            pagination={paginationProps}
            dataSource={userList}
            renderItem={item => (
              <List.Item
                actions={[
                  <a onClickCapture={() => this.handleModalVisibleUpdate(true, {
                    id: item.id,
                    name: item.name,
                    email: item.email,
                  })}
                  >
                    编辑
                  </a>,
                  <a onClickCapture={this.deleteUser.bind(this, item.id)}>删除</a>]}
              >
                <List.Item.Meta
                  // avatar={<Avatar src={item.logo} shape="square" size="large" />}
                  title={<a>{item.name}</a>}
                  description={item.email}
                />
              </List.Item>
            )}
          />
        </div>
        <CreateFormAdd
          {...parentMethodsAdd}
          modalVisible={modalVisibleAdd}
        />
        <CreateFormUpdate
          {...parentMethodsUpdate}
          modalVisible={modalVisibleUpdate}
        />
      </PageHeaderLayout>
    );
  }
}
